<template>
  <div class="column-filter">
    <div class="form-group" v-for="f in value">
      <label>{{f.label}}:</label>
      <component class="filter" :is="f.filter" @input="onInput($event,f)" @change="onChange($event,f)" v-bind='f'>
      </component>
    </div>
</template>
<script>
const filters = require('./filters')
export default {
  components: filters,
  props: {
    'value': Array
  },
  methods: {
    onInput: function (value, filter) {
      let filters = this.value.map(o => o)
      filters.forEach(f => {
        if (f === filter) {
          f.value = value === undefined ? undefined : (f.valueType ? f.valueType(value) : value)
        }
      })
      this.$emit('input', filters)
    },
    onChange: function (value, filter) {
      let filters = this.value.map(o => o)
      filters.forEach(f => {
        if (f === filter) {
          f.value = value === undefined ? undefined : (f.valueType ? f.valueType(value) : value)
        }
      })
      this.$emit('change', filters)
    }
  }
}
</script>
<style scoped lang="scss">
.column-filter {
  margin-bottom: 10px;
  .form-group {
    label {
      float: left;
      min-width: 4em;
    }
    .filter {
      margin-left: 4em;
    }
    margin-top: 10px;
    min-height: 1.8em;
  }
}
</style>
